<html>
  <head>
    <script  src="https://unpkg.com/react@16.12.0/umd/react.production.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/jsonx/dist/index.umd.js" type="text/javascript" ></script>
  </head>
  <body>
    <div id="main"></div>
    <script>
      const mockAsyncData = {
        user: {
          name: 'jsonxUser',
          description: 'react without javascript',
        },
        stats: {
          logins: 102,
          comments: 3,
        },
        authentication: 'OAuth2',
      };

      const JXM = {
        component: 'div',
        props: {
          id: 'generatedJSONX',
          className:'jsonx',
        },
        asyncprops:{
          ['data-auth']: [ 'authentication', ],
          title: [ 'user', 'name', ],
        },
        children: [
          {
            component: 'p',
            props: {
              style: {
                color: 'red',
                fontWeight:'bold',
              },
            },
            asyncprops:{
              _children: ['user','description']
            },
            children:'hello world',
          },
          {
            component:'p',
            children:[
              {
                component:'span',
                children:'Current Page: '
              },
              {
                component:'span',
                props:{
                  style:{
                    fontWeight:'bold',
                  }
                },
                windowprops:{
                  _children:['location','href']
                }
              }
            ]
          }
        ],
      };

      
      jsonx.jsonxRender({
        jsonx:JXM, 
        querySelector:'#main',
        resources: mockAsyncData,
      });
    </script>
  </body>
</html>